<template>
    <div class="dashboard-container">
        <el-calendar v-model="date">
            <template #date-cell="{ data }">
                <div class="calendar-day" @click="handleDateClick(data)">
                    <div>{{ data.day.split('-').slice(2).join('-') }}</div>
                    <!-- 新增：显示 xcgj_daily_count -->
                    <div v-if="getXcgjDailyCount(data.day)" class="count-display" style="color: red;">
                        {{ getXcgjDailyCount(data.day) }}
                    </div>
                    <div v-else>&nbsp;</div>
                    <div v-if="getGjDailyCount(data.day)" class="count-display" style="color: green;">
                        {{ getGjDailyCount(data.day) }}
                    </div>
                </div>
            </template>
        </el-calendar>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { getCalendarDgjjls } from '../api';
import { useRouter } from 'vue-router';

const router = useRouter()

let date = ref(new Date())
const calendarData = ref<Array<{ full_date: string, xcgj_daily_count: number, gj_daily_count: number }>>([])

// 获取日历数据
const fetchConsultationData = async () => {
    let year = date.value.getFullYear()
    let month = date.value.getMonth() + 1;
    const res = await getCalendarDgjjls({ year, month });
    calendarData.value = res || [];
}

// 根据日期查找对应的 下次跟进数量
const getXcgjDailyCount = (dateString: string) => {
    const dateObj = new Date(dateString);
    const formattedDate = formatDate(dateObj);
    const found = calendarData.value.find(item => item.full_date === formattedDate);
    return found ? found.xcgj_daily_count : null;
}

// 根据日期查找对应的 当天跟进数量
const getGjDailyCount = (dateString: string) => {
    const dateObj = new Date(dateString);
    const formattedDate = formatDate(dateObj);
    const found = calendarData.value.find(item => item.full_date === formattedDate);
    return found ? found.gj_daily_count : null;
}

// 格式化日期，确保与 API 返回的格式一致
const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`; // 例如：2023-05-01
}

onMounted(() => {
    fetchConsultationData()
})

// 存储上一次的年月，用于比较
const lastYearMonth = ref({
    year: date.value.getFullYear(),
    month: date.value.getMonth()
});

// 日期点击事件处理
const handleDateClick = (data) => {
    console.log(data);
    console.log(getXcgjDailyCount(data.day));
    // 路由跳转
    router.push({
        name: 'ConsultationGjjl',
        query: {
            day: data.day
        }
    })
}

// 监听年月变化，重新获取数据
watch(
    date,
    (newDate) => {
        const newYear = newDate.getFullYear();
        const newMonth = newDate.getMonth();

        // 只有当年或月变化时才请求数据
        if (newYear !== lastYearMonth.value.year || newMonth !== lastYearMonth.value.month) {
            console.log('执行了');
            fetchConsultationData();
            lastYearMonth.value = { year: newYear, month: newMonth }; // 更新记录
        } else {
            // 跳转到跟进页面
        }
    },
    { deep: true }
);
</script>

<style scoped>
.dashboard-container {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.calendar-day {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.count-display {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}
</style>